<template>
<el-container class="uu">
        <el-menu
            :router="true"
            default-active="2"
            :unique-opened="true"
            :collapse="isCollapse"
            class="el-menu-vertical-demo"
            style="box-shadow:0.2px 0px 15px 0px rgb(50 50 50);">
            <el-menu-item-group index="1">
                <el-menu-item index="/main/welcome">
                    <el-avatar :src="require('@/assets/image/download.png')" class="avatar" style="width:30px;height:30px;"/>
                    <el-dropdown trigger="click" slot="title">
                        <div><span style="padding-left:10px;">
                            {{this.$store.state.loginuserinfo.userIdentity==0?'超级管理员':''}}
                            {{this.$store.state.loginuserinfo.userIdentity==1?'民政局用户':''}}
                            {{this.$store.state.loginuserinfo.userIdentity==2?'干休所用户':''}}
                        </span></div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="openeditpassword">修改密码</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-s-cooperation"></i>
                    <span>数据统计</span>
                </template>
                <el-menu-item index="/main/YangLaoFuWuJiGou">养老服务机构</el-menu-item>
                <el-menu-item index="/main/YangLaoFuWuSheShi">养老服务设施</el-menu-item>
                <el-menu-item index="/main/YangLaoFuWuRenQun">养老服务人群</el-menu-item>
                <el-menu-item index="/main/YangLaoFuWuChuangWei">养老服务床位数</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-office-building"></i>
                    <span>机构养老</span>
                </template>
                <el-submenu index="3-1">
                    <template slot="title">机构管理</template>
                    <el-menu-item index="/main/3-1-1">基本信息</el-menu-item>
                </el-submenu>
                <el-menu-item index="/main/JingFeiBuTie">经费补贴</el-menu-item>
                <el-submenu index="3-3">
                    <template slot="title">安全信息管理</template>
                    <el-menu-item index="/main/3-3-1">安全教育与培训记录</el-menu-item>
                    <el-menu-item index="/main/3-3-2">安全标识检查记录</el-menu-item>
                    <el-menu-item index="/main/3-3-3">每月防火检查记录</el-menu-item>
                    <el-menu-item index="/main/3-3-4">维护保养和检测记录</el-menu-item>
                    <el-menu-item index="/main/3-3-5">安全演练记录</el-menu-item>
                </el-submenu>
                <el-menu-item index="/main/FuWuXinXi">服务质量信息</el-menu-item>
                <el-menu-item index="/main/ShouFeiBiaoZhun">收费标准</el-menu-item>
                <el-menu-item index="/main/CongYeRenYuan">从业人员信息</el-menu-item>
                <el-menu-item index="/main/RuzhuGuanLi">入住管理</el-menu-item>
                <el-menu-item index="/main/3-8">机构分布图</el-menu-item>
                <el-menu-item index="/main/LaoNianRenNengLiPingGu">老年人能力评估</el-menu-item>
            </el-submenu>
                
            <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-s-flag"></i>
                    <span>社区和居家养老</span>
                </template>
                <el-menu-item index="/main/rijianzhaoliao">日间照料中心</el-menu-item>
                <el-menu-item index="/main/jujiayanglao">居家养老服务</el-menu-item>
                <el-menu-item index="/main/anquanguanli">安全管理信息</el-menu-item>
            </el-submenu>
    
            <el-submenu index="5">
                <template slot="title">
                    <i class="el-icon-s-operation"></i>
                    <span>配置管理</span>
                </template>
                <el-menu-item index="/main/PingGuMoBan">评估模板</el-menu-item>
                <el-menu-item index="/main/PingGuJiBieGuanLi">评估级别管理</el-menu-item>
                <el-menu-item index="/main/ZhiBiaoGuanLi">指标管理</el-menu-item>
            </el-submenu>
        </el-menu>
        <el-container>
            <el-header style="font-size:12px;height:45px;" class="hea1">
                <span style="padding-left:20px;font-size:15px !important;">{{this.$store.state.loginuserinfo.userName}}</span>
                <el-dropdown trigger="click">
                    <div style="padding-left:20px;"><i class="el-icon-caret-left" style="color:#dfe1e4;"></i></div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="guan">开启侧边栏</el-dropdown-item>
                        <el-dropdown-item @click.native="kai">关闭侧边栏</el-dropdown-item>
                        <el-dropdown-item @click.native="tui">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-header style="height:30px;" class="hea2">
                <i v-show="!isCollapse" class="el-icon-s-fold" @click="kai" style="color:#dfe1e4;transform:translate(-6%,-153%);font-size:28px;"></i>
                <i v-show="isCollapse" class="el-icon-s-unfold" @click="guan" style="color:#dfe1e4;transform:translate(-6%,-153%);font-size:28px;"></i>
                <span style="color:#dfe1e4;text-align:left;position:relative;top:-48px;left:10px;">新疆维吾尔自治区民政养老服务管理系统</span>
                <el-breadcrumb separator="/" class="breadcrumb" style="transform:translate(0%,-159%);height:30px;">
                    <el-breadcrumb-item :to="{path:'/main/welcome'}">首页</el-breadcrumb-item>
                    <!-- <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                    <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
                </el-breadcrumb>
            </el-header>
            <el-main style="margin:0px;padding:0px;">
                <router-view></router-view>
            </el-main>
            <!-- <el-footer style="height:20px;">
                <div style="text-align:right;">
                    河北中科恒运软件科技股份有限公司
                </div>
            </el-footer> -->
        </el-container>
    </el-container>
</template>
<script>
export default{
    data(){
        return{
            sss:[],
            isCollapse:false
        }
    },
    methods:{
        tui(){
            if(this.$store.state.loginuserinfo==''){
                this.$router.push('/login');
            }
            this.$message({showClose:true,message:"退出成功",type:"success"});
            this.$router.push('/login');
        },
        // login(){
        //     if(this.$store.state.loginuserinfo!==''){
        //         console.log(this.$store.state.loginuserinfo);
        //         console.log('-----------------------------');
        //         this.$message({showClose:true,message:"检测到您未登录,请重新登录!!"});
        //         this.$router.push('/login');
        //     }
        //     console.log(this.$store.state.loginuserinfo);
        // },
        kai(){
            this.isCollapse=true;
        },
        guan(){
            this.isCollapse=false;
        },
        openeditpassword(){
            this.$router.push('/main/updatepassword');
        },
    },
    mounted(){
        this.$router.push('/main/welcome')
        // this.login();
    }
};
</script>
<style scoped>
    html,body,#app,.el-container{
        margin:0px;
        padding:0px;
    }
    .uu{
        width:100%;
        height:100%;
        background-color: #e7effa;
        background-size:cover;
        position:fixed;
        background-attachment:fixed;
    }
    .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        line-height: 40px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
    }
    /* .image-item{
        position:absolute;
        top:0;
        color:white;
        background:rgba(174,174,174,0.5);
        padding:5px;
    } */
    .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        line-height: 40px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
    }
    .hea1{
        text-align:right;
        font-size:12px;
        line-height:50px;
        color:#dfe1e4;
        background-color:rgb(73,73,73);
    }
    .hea2{
        line-height:50px;
        color:#333;
        background-color:#dfe1e4;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse){
        width:220px;
    }
    .avatar{
        width:30px;
        height:30px;
        line-height:30px;
    }
    .breadcrumb{
        font-size:14px;
        line-height:2;
    }
  </style>